import React, { useEffect, useState }from 'react'

export default function App() {
    const [uname,Setuname]=useState('abc')
    useEffect(()=>{
        Setuname(uname.substring(0,1).toUpperCase()+uname.substring(1))
    },[uname])
  return (
    <div>
        <button onClick={()=>{Setuname('cccc')}}>click</button>
        {uname}</div>
  )
}


class FilmList extends Component{
  state = {
      list:[],
      type:1
  }

  //初始化-执行一次
  componentDidMount() {
      // console.log(this.props.type)
      if(this.props.type===1){
          //请求卖座正在热映的数据
          console.log("请求卖座正在热映的数据")
          axios({
              url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=6369301",
              headers:{
                  'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                  'X-Host': 'mall.film-ticket.film.list'
              }
          }).then(res=>{
              console.log(res.data.data.films)
              this.setState({
                  list:res.data.data.films
              })
          })
      }else{
          //请求卖座即将上映的数据

          console.log("请求卖座即将上映的数据")

          axios({
              url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=8077848",
              headers:{
                  'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                  'X-Host': 'mall.film-ticket.film.list'
              }
          }).then(res=>{
              console.log(res.data.data.films)
              this.setState({
                  list:res.data.data.films
              })
          })
      }
  }

  static getDerivedStateFromProps(nextProps,nextState){
      // console.log(this)
      console.log("getDrivedStateFromProps",nextProps)
      
      return {
          type:nextProps.type
      }
  }

  componentDidUpdate(prevProps,prevState){
      console.log(this.state.type)
      if(this.state.type===prevState.type){
          return
      }

      if(this.state.type===1){
          //请求卖座正在热映的数据
          console.log("请求卖座正在热映的数据")
          axios({
              url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=6369301",
              headers:{
                  'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                  'X-Host': 'mall.film-ticket.film.list'
              }
          }).then(res=>{
              console.log(res.data.data.films)
              this.setState({
                  list:res.data.data.films
              })
          })
      }else{
          //请求卖座即将上映的数据

          console.log("请求卖座即将上映的数据")
          axios({
              url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=8077848",
              headers:{
                  'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                  'X-Host': 'mall.film-ticket.film.list'
              }
          }).then(res=>{
              console.log(res.data.data.films)
              this.setState({
                  list:res.data.data.films
              })
          })
      }
  }

  render(){
      return <ul>
          {
              this.state.list.map(item=>
              <li key={item.filmId}>{item.name}</li>    
              )
          }
      </ul>
  }
}
